<template>
  <View class="app-dashboard" title="中国人">
    <section class="app-markdown-ui clearfix">
      <div class="app-markdown-editor">
        <textarea id="" v-model="content" class="source ant-input" />
      </div>
      <div class="app-markdown-divide" />
      <div class="app-markdown-preview">
        <MarkdownIt :breaks="true" :source="content" />
      </div>
    </section>

  </View>
</template>

<script lang="ts">
import { defineComponent, ref, } from 'vue'
import MarkdownIt from '/@/components/Markdown/index.vue'

const Text = `## 虞美人·春花秋月何时了
### 李煜 

春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流。
`

export default defineComponent({
  components: {
    MarkdownIt,
  },
  setup() {
    const content = ref(Text)
    return {
      content,
    }
  },
})
</script>

<style lang="scss">
.app-markdown-ui {
  position: relative;
  border: 1px solid #e5e5e5;
  height: 100%;
  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'Malgun Gothic', sans-serif;
  .app-markdown-editor {
    .source {
      width: 100%;
      border-width: 0;
      padding: 1rem;
      height: 100%;
      min-height: 500px;
    }
  }
  .app-markdown-editor,
  .app-markdown-preview {
    float: left;
    width: 50%;
  }
  .app-markdown-divide {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 1px;
    border-left: 1px solid #e5e5e5;
  }
}
</style>
